<script setup lang="ts">
import CdlTable from "@/components/table";
import CdlForm from "@/components/form";
import {ElRadioGroup, ElRadio} from "element-plus"
import {Mode, Query, State, FormData} from "@/interfaces/components/Page";
import {useRouter} from "vue-router";
import {reactive, h, ref} from "vue";
import {useTableTemplate} from "@/hooks/TableHooks";
import {BillType} from "@/interfaces/views/finance/bills";
import {TableTree} from "@/interfaces/components/Table";
import {createPopup} from "@/utils/createPopup";
import {FormTree} from "@/interfaces/components/Form";
import {appStore} from "@/store/modules/app";

const store = appStore()
const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/bill/type",
}
const state = reactive<State<Query<BillType>, BillType>>({
  queryForm: {},
  dataList: []
})
const {query, added} = useTableTemplate(request, state)

const tableTree: TableTree<BillType> = {
  colRule: [
    {ti: "账单名称", prop: "name"},
    {ti: "收入/支出", prop: "mode", dict: "bill_mode"},
    {ti: "账单类型", prop: "type", dict: "bill_type"},
    {ti: "权限", prop: "vis", dict: "bill_vis"},
    {ti: "备注", prop: "remark"},
    {ti: "创建时间", prop: "createTime"}
  ],
  control: [
    {name: "删除", type: "danger", method: () => {}}
  ]
}
const modeArr = store.getFormatDict("bill_mode")

const popupFormTree: FormTree<BillType> = [
    [
      {label: "账单名称", component: "input", prop: "name", rule: [
          {required: true, message: "必须填写账单名称", trigger: "blur"}
        ]}
    ],
    [
      {label: "账单类型", component: "radio", prop: "type", options: store.getFormatDict("bill_type"),
        optionProps: {label: "dictLabel", value: "dictValue"}, rule: [
          {required: true, message: "必须选择账单名称", trigger: "change"}
        ], changeMethod: (val, data) => {
          // @ts-ignore
          data.mode = undefined
        }}
    ],
    [
      {label: "收入/支出", prop: "mode", slot: (data) => {
          return h(ElRadioGroup, {
            modelValue: data.mode,
            onChange: (val) => {
              data.mode = val as number
            }
          }, ()=> modeArr.filter((item: any) => [[3],[6],[1],[1],[1,3,5],[2,4,6]][data.type - 1]
              .includes(item.dictValue)).map((item: any) => h(ElRadio, {
            label: item.dictValue,
          }, ()=> item.dictLabel)))
        }, rule: [
          {required: true, message: "必须选择账单名称", trigger: "change"}
        ]}
    ],
    [
      {label: "权限", component: "checkboxGroup", prop: "vis", options: [
          {label: "司机", value: 1},
          {label: "托运人", value: 2}
        ]}
    ],
    [
      {label: "备注", component: "input", prop: "remark", type: "textarea"}
    ]
]
const popupForm = reactive<FormData<BillType>>({
  id: undefined,
  name: "",
  type: 1,
  mode: undefined,
  vis: undefined,
  remark: ""
})

function openBillTypeInsert(){
  createPopup("新增账单类型", h(CdlForm, {
    templateTree: popupFormTree,
    model: popupForm
  }), "add", popupCallBack)
}
/**
 * 回调处理
 * @param mode
 * @param data
 */
function popupCallBack(mode: Mode, data: any){
  data.vis = data.vis?.reduce((prev: number, curr: number)=> prev + curr)
  switch (mode){
    case "add":
      added(data)
      break
  }
}
</script>

<template>
  <el-card>
    <el-button type="primary" @click="openBillTypeInsert">新增</el-button>
    <CdlTable :template-tree="tableTree" :data="state.dataList"></CdlTable>
  </el-card>
</template>
